<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>
  <!-- onchange事件 是内容发生变化触发 函数中的this指当前选择的option -->
  <select id="province" onchange="selectCity(this)">
    <option value="none">--请选择省--</option>
  </select>
  <br><br>
  <hr>
  <div id="selectDiv">
    <select id="city" onchange="selectDistrict(this)">
      <option value="none">--请选择市--</option>
    </select>
    <span id="districtSpan">
      <select id="district">
        <option>--请选择县/区--</option>
      </select>
    </span>
  </div>
  <!-- 引入中国的省市地区文件 data.js -->
  <script src="data.js"></script>
  <script type="text/javascript">
    // 获取全国所有的省级行政单位
    let data = getChineseDistricts();
    // 1. 获取省级单位 结果是一个对象  其中的各个地区代码和地区名 是对象的属性名和属性值
    let provinceDataObj = data["86"];
    // 获取选择省的select标签
    let provinceSelObj = document.querySelector("#province");
    // 调用公共方法
    fillSelect(provinceSelObj, provinceDataObj);

    // 2. 当省发生了变化, 获取省属的所有市
    function selectCity(thisObj) {
      // 获取选中的省 省级代码 例如北京的代码是 110000
      let prov = thisObj.value;
      if (prov == "none") {
        // 选择了 "--请选择省--" 相当于没有选择省 不处理
        return;
      }
      // 获取当前选择省里的所有市
      let cityDataObj = data[prov];
      // 获取市的select标签
      let citySelObj = document.querySelector("#city");
      // 清空之前所有的数据
      // 获取所有的已选择的市
      let opts = document.querySelectorAll("#city option");
      if (opts.length > 1) { // 之前超过1个选项
        // 第一个option标签是<option>--请选择市--</option> 不需要删除
        for (let i = 1; i < opts.length; i++) {
          // 获取其中的一个option
          let opt = opts[i];
          // 删除这个option标签
          citySelObj.removeChild(opt);
        }
      }
      // 调用公共方法
      fillSelect(citySelObj, cityDataObj);
    }

    // 3. 根据选择的市 获取市属所有县区 填充到select标签中
    function selectDistrict(thisObj) {
      // 获取选择的市
      let city = thisObj.value;
      if (city == "none") {
        // 选择了 --请选择市-- 相当于没有选 不处理
        return;
      }
      // 根据选择的市 获取所有的县区
      let districtDataObj = data[city];
      // 获取县区的select标签
      let districtSelObj = document.querySelector("#district");
      // 清空原来的数据
      let opts = document.querySelectorAll("#district option");
      if (opts.length > 1) {
        for (let i = 1; i < opts.length; i++) {
          let opt = opts[i];
          districtSelObj.removeChild(opt);
        }
      }
      // 追加新的县区数据
      fillSelect(districtSelObj, districtDataObj);
    }

    // 省市县遍历方法 把遍历的省市县数据填充到各个select标签中
    function fillSelect(selectObj, dataObj) {
      // 循环遍历对象的属性名和属性值 使用for in循环(专门遍历对象的属性)
      for(let key in dataObj) { // 其中的key表示对象的属性名
        // 创建一个option标签
        let oOption = document.createElement("option");
        // 给option标签添加文本内容
        oOption.innerText =dataObj[key]; // 根据key取到值
        // 给option标签添加value值
        oOption.value = key;
        // 把option标签追加到省市县单位里
        selectObj.appendChild(oOption);
      }
    }
  </script>
</body>
</html>